<script setup>
import { formatDate } from "@/utils/";
import { useGenderList, useMemberList } from "@/hooks/index";
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array,
    default: [],
  },
});

// 处理性别、成员类型等状态类别
const showState = (val, type) => {
  let res;
  if (type === "gender") {
    res = useGenderList().find((item) => item.value === val * 1);
  } else if (type === "owner_type") {
    res = useMemberList().find((item) => item.value === val * 1);
  }
  return res ? res.label : "-";
};
</script>

<template>
  <el-table :data="list" border stripe>
    <el-table-column
      v-for="col in columns"
      :prop="col.prop"
      :label="col.label"
      :width="col.width"
    >
      <!-- 小区、栋数、房产名称 -->
      <template v-if="col.type === 'position'" #default="{ row, column }">
        {{ row[column.property]?.name }}
      </template>
      <!-- 图片 -->
      <template v-if="col.type === 'picture'" #default="{ row }">
        <ImagePreview :src="row.photo"></ImagePreview>
      </template>
      <!-- 时间 -->
      <template v-if="col.type === 'time'" #default="{ row, column }">
        {{ formatDate(row[column.property]) || "-" }}
      </template>
      <!-- 性别、成员类型等 类型 -->
      <template v-if="col.type === 'typeState'" #default="{ row, column }">
        {{ showState(row[column.property], column.property) }}
      </template>
      <template v-if="col.type === 'action'" #default="{ row }">
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped></style>
